  <template>
    <div>
      <!-- 图书表格 -->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="100">
        </el-table-column>
        <el-table-column
          prop="title"
          label="书名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="author"
          label="作者"
          width="180">
        </el-table-column>
        <el-table-column
          prop="copies"
          label="副本数量">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <!-- 删除图书按钮 -->
            <el-button @click="deleteBook(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加图书表单 -->
      <el-form :model="newBook" label-width="80px">
        <el-form-item label="ID">
          <el-input v-model="newBook.id"></el-input>
        </el-form-item>
        <el-form-item label="书名">
          <el-input v-model="newBook.title"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="newBook.author"></el-input>
        </el-form-item>
        <el-form-item label="副本数量">
          <el-input v-model.number="newBook.copies"></el-input>
        </el-form-item>
        <el-form-item>
          <!-- 添加图书按钮 -->
          <el-button type="primary" @click="addBook">添加图书</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>

  <script>
    export default {
      data() {
        return {
          // 图书数据
          tableData: [
            {"id": 1, "title": "Python编程", "author": "John Doe", "copies": 4},
            {"id": 2, "title": "历史的秘密", "author": "Jane Smith", "copies": 3},
            {"id": 3, "title": "宇宙探索", "author": "Emily Brown", "copies": 2},
            {"id": 4, "title": "健康生活", "author": "Mike Johnson", "copies": 5},
            {"id": 5, "title": "数学之美", "author": "Sarah Lee", "copies": 4},
            {"id": 6, "title": "艺术欣赏", "author": "David White", "copies": 3},
            {"id": 7, "title": "编程入门", "author": "Alice Green", "copies": 2},
            {"id": 8, "title": "科幻世界", "author": "Frank Black", "copies": 5},
            {"id": 9, "title": "自然奇观", "author": "Grace Blue", "copies": 4},
            {"id": 10, "title": "音乐之声", "author": "Tom Red", "copies": 3}
          ],
          // 新图书对象
          newBook: {
            id: '',
            title: '',
            author: '',
            copies: 0
          }
        }
      },
      methods: {
        // 删除图书方法
        deleteBook(book) {
          const index = this.tableData.indexOf(book);
          if (index !== -1) {
            this.tableData.splice(index, 1);
          }
        },
        // 添加图书方法
        addBook() {
          if (this.newBook.id && this.newBook.title && this.newBook.author && this.newBook.copies >= 0) {
            this.tableData.push({ ...this.newBook });
            // 清空表单
            this.newBook = {
              id: '',
              title: '',
              author: '',
              copies: 0
            };
          }
        }
      }
    }
  </script>
